<template >
  <div class="divBox" style="padding-bottom:15px;">
    <el-row :gutter="5" class="baseInfo">
      <div :span="3">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home'  }">资源</el-breadcrumb-item>
          <el-breadcrumb-item>资源统计</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">素材等级统计</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-col  v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <span class="main_tit" >{{this.imageList.length}}</span>
              </div>

            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15"><!-- {{ viewData.sales }}--></span>
              <div class="acea-row row-between-wrapper">
                <span class="content-time">制图总数量</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
      <el-col :span="3" v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12">
          <div  class="acea-row row-between-wrapper">
            <div class="acea-row align-center">
              <span class="main_tit">{{ this.formalImageNum }}</span>
            </div>
          </div>
          <div class="content" v-if="viewData">
            <span class="content-number spBlock my15"></span>
            <div class="acea-row row-between-wrapper">
              <span class="content-time" >正式</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3" v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12" style="background:#4A94D8" >
          <div  class="acea-row row-between-wrapper">
            <div class="acea-row align-center">
              <span class="main_tit" >{{this.goodImageNum}}</span>
            </div>
          </div>
          <div class="content" v-if="viewData">
            <span class="content-number spBlock my15"></span>
            <div class="acea-row row-between-wrapper">
              <el-tag size="mini" type="warning">优秀</el-tag>
              <span class="content-time"></span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3" v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12"  style="background:#4A94D8">
          <div  class="acea-row row-between-wrapper">
            <div class="acea-row align-center">
              <span class="main_tit">{{ this.goodPushImageNum}}</span>
            </div>
          </div>
          <div class="content" v-if="viewData">
            <span class="content-number spBlock my15"></span>
            <div class="acea-row row-between-wrapper">
              <el-tag size="mini" type="warning">优秀+</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3" v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12"  style="background:#FFF5DF">
          <div  class="acea-row row-between-wrapper">
            <div class="acea-row align-center">
              <span class="main_tit">{{ this.seniorImageNum}}</span>
            </div>
          </div>
          <div class="content" v-if="viewData">
            <span class="content-number spBlock my15"></span>
            <div class="acea-row row-between-wrapper">
              <el-tag size="mini" type="warning">高级</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3" v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12"  style="background:#FFF5DF" >
          <div  class="acea-row row-between-wrapper">
            <div class="acea-row align-center">
              <span class="main_tit">{{ this.seniorPushImageNum}}</span>
            </div>
          </div>
          <div class="content" v-if="viewData">
            <span class="content-number spBlock my15"></span>
            <div class="acea-row row-between-wrapper">
              <el-tag size="mini" type="warning">高级＋</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3" v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12"  style="background:#2B952B">
          <div  class="acea-row row-between-wrapper">
            <div class="acea-row align-center">
              <span class="main_tit">{{ this.chiefImageNum }}</span>
            </div>
          </div>
          <div class="content" v-if="viewData">
            <span class="content-number spBlock my15"></span>
            <div class="acea-row row-between-wrapper">
              <el-tag size="mini" type="warning">首席</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-divider></el-divider>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-col :span="4">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        </el-col>
        <el-select v-model="formInline.user" placeholder="所属公司 全部" style="margin-left: 10px">
          <el-option label="其他" value="shanghai"></el-option>
          <el-option label="业余" value="beijing"></el-option>
        </el-select>
        <el-select v-model="formInline.region" placeholder="时间范围 近一个月">
          <el-option label="近半年" value="shanghai"></el-option>
          <el-option label="近两年" value="beijing"></el-option>
        </el-select>
        <el-form-item>
          <el-button type="primary" class="el-icon-bell" >高级筛选</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children'}">
        <el-table-column
          label="制作方"
          prop="companyName">
        </el-table-column>
        <el-table-column
          label="制图总数量"
          prop="number">
        </el-table-column>
        <el-table-column
          label="高级"
          prop="numberFour">
        </el-table-column>
        <el-table-column
          label="正式"
          prop="numberTwo">
        </el-table-column>
        <el-table-column
          label="首席"
          prop="numberSix">
        </el-table-column>
        <el-table-column
          label="高级以上占比"
          prop="numberProp">
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>

import axios from "@/utils/request";

export default {
  name: "level",
  data() {
    return {
      imageList:[],//所有制图总数量
      formalImageNum:null,//小白
      goodImageNum:null,//正式
      goodPushImageNum:null,//标准
      seniorImageNum:null,//高级
      seniorPushImageNum:null,//优秀
      chiefImageNum:null,//首席制图总数量
      grid: {xl: 3, lg: 3, md: 4, sm: 3, xs: 1},
      viewData: {
      },
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],

    }
  },
  methods: {
    selectImageNum(zpshName) {
      axios.get("/detail/st", {params: {
        'zpshName': zpshName
      }}).then(res => {
        const map = new Map(Object.entries(res));
        if (zpshName != null) {
          if (zpshName === '首席') {
            this.chiefImageNum = map.get(zpshName)
          } else if (zpshName === '小白') {
            this.formalImageNum = map.get(zpshName)
          } else if (zpshName === '正式') {
            this.goodImageNum = map.get(zpshName)
          } else if (zpshName === '标准') {
            this.goodPushImageNum = map.get(zpshName)
          } else if (zpshName === '高级') {
            this.seniorImageNum = map.get(zpshName)
          } else if (zpshName === '优秀') {
            this.seniorPushImageNum = map.get(zpshName)
          }
        }
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)

      })
    },
    allselect() {
      axios.get("/detail/all").then(res => {
        this.imageList = res
        console.log(1111111111111111)
        console.log(this.imageList)
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      }).catch(err => {
        console.log(err)
      })
    },
    allCompany(){
      axios.get("/detail/list").then(res => {
        let tableData=res /*给父亲赋值*/
        axios.get("/detail/Term").then(res => {
          tableData.forEach((info,num)=>{  //循环父亲进行操作（info:遍历的属性或对象，num:下标）
            info.children=[]; //初始化儿子
            info.id=num+10  //父亲添加id属性
            res.forEach((item,index)=>{ //循环查询儿子的返回值
              if(info.companyName===item.companyName){  //判断父亲与儿子是否在同一公司
                item.id = index+50    //儿子添加id属性
                item.companyName = item.numberTeam  //修改companyName（公司）属性为numberTeam（制作组）
                info.children.push(item)  //将遍历对象添加给父亲的儿子
                }
            })
          })
          this.tableData=tableData;
          console.log(this.tableData)
          this.$forceUpdate();
          console.log(this.tableData[1].id)
          console.log(this.tableData[1].children[1].id)
        }).catch(err => {
          console.log(err)
        })
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      }).catch(err => {
        console.log(err)
      })
    },
    },
  mounted() {
       this.allselect();
         this.selectImageNum('小白');
         this.selectImageNum('正式');
         this.selectImageNum('标准');
         this.selectImageNum('高级');
         this.selectImageNum('优秀');
         this.selectImageNum('首席');
        this.allCompany()

  }
}
</script>
<style scoped lang="scss">
.ivu-mb{
  margin-bottom: 10px;
}
.up, .el-icon-caret-top {
  color: #F5222D;
  font-size: 12px;
  opacity: 1 !important;
}

.down, .el-icon-caret-bottom {
  color: #39C15B;
  font-size: 12px;
  /*opacity: 100% !important;*/
}
.main_tit{
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
.content-time{
  font-size: 14px;
  color:#333;
  font-weight: 500;
}
.main_badge{
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 5px;
  background: #2C90FF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my15{
  margin: 15px 0 15px;
}
.align-center{
  align-items: center;
}
.baseInfo {
  ::v-deep .el-card__header {
    padding: 15px 20px !important;
  }
}
.lll{
  margin-left: 360px;
  margin-top: 250px;
}
.content {
  &-number {
    font-size: 30px;
    font-weight: 300;
    /*font-family: PingFangSC-Semibold, PingFang SC;*/
    color: #333;
  }
  &-time{
    font-size:14px;
    color: #333333;
    font-weight: 400;
  }

}

</style>
